<template>
    <div class="login-page">
        <div class="bg">
            <video src="./bg-video.d2d602a9.mp4" loop muted autoplay></video>
        </div>
        <div class="login-container">
            <div class="login-inner">
                <h1 class="title">{{ pageInfo.title }}</h1>
                <!-- 动态组件 -->
                    <component :is="pageInfo.component"></component>
                <div class="toggle">
                    <svg class="icon" aria-hidden="true">
                        <use :xlink:href="icon">
                        </use>
                    </svg>
                    <b @click="handleToggle">{{ pageInfo.toggleDes }}</b>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import commonLogin from "../../components/login/commonLogin.vue"
import smsLogin from "../../components/login/smsLogin.vue"
import { ref, watchEffect, markRaw, computed } from "vue"

//markRow可以将响应式的ref变成常规对象

//声明一个页面数据
let pageInfo = ref({
    title: 'crm系统',//标题
    loginType: 'common',//登入类型 commonLogin/smsLogin
    toggleDes: "点击切换手机登入",//切换的描述信息
    component: markRaw(commonLogin) //要切换的组件
})

//用于标记是否常规登入
let isCommonLogin = ref(true);

//点击切换登入方式
let handleToggle = () => {
    isCommonLogin.value = !isCommonLogin.value
}

//通过结合高级侦听器和vue3的动态组件来实现组件切换

//vue3的动态组件,通过:is结合 component这个组件来实现动态切换

watchEffect(() => {
    //常规登入
    if (isCommonLogin.value) {
        pageInfo.value = {
            title: 'crm系统',//标题
            loginType: 'common',//登入类型 commonLogin/smsLogin
            toggleDes: "点击切换手机登入",//切换的描述信息
            component: markRaw(commonLogin) //要切换的组件
        }
    } else {
        // 手机短信登入
        pageInfo.value = {
            title: '短信登入',//标题
            loginType: 'sms',//登入类型 commonLogin/smsLogin
            toggleDes: "使用用户密码登入",//切换的描述信息
            component: markRaw(smsLogin) //要切换的组件
        }
    }
})

//根据登入模式的切换,派发图标的名称
let icon = computed(() => {
    return isCommonLogin.value ? '#icon-iphone' : '#icon-icon-test'
})


</script>
  

<style lang="scss" scoped>
// 定制组件,修改样式的思路
//1.找到对应组件结构的类名
//2.重新编写样式,覆盖原来的样式

//样式修改不成功的因素和解决方案

//1.确认类名是否正确

//2.确认权重是否足够 !important

//3.是否需要使用深度选择器 xx :deep(选择器) scoped样式,层级嵌套比较深的时候
.login-page {
    .bg {
        video {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
        }
    }

    .login-container {
        position: fixed;
        z-index: 99;
        // background:#fff;
        min-width: 400px;
        min-height: 400px;
        right: 10%;
        bottom: 15%;
        background-color: rgba(0, 0, 0, .3);
        color: #fff;
        border-radius: 20px;

        .login-inner {
            margin-top: 55px;
            width: 100%;

            .toggle {
                text-align: center;
                // text-decoration: underline;
                margin: 30px 0;

                b {
                    cursor: pointer;
                }
            }

            .title {
                text-align: center;
                color: #fff;
                margin-bottom: 30px;
            }

            :deep(.icon) {
                width: 2em;
                height: 2em;
                margin-right: 5px;
                vertical-align: middle;
            }
        }

    }

}
</style>